<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Badges"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>Badges</h1>
                            <p class="lead text-dark">Documentation and examples for badges, our small count and labeling component.</p>
                            <a href="https://getbootstrap.com/docs/4.3/components/badge/" target="_blank" class="btn btn-icon btn-primary mb-3">
                                <span class="btn-inner-icon"><i class="fas fa-info-circle"></i></span>
                                <span class="btn-inner-text">Bootstrap 4 documentation</span>
                            </a>
                        </div>
                        <div id="example" class="my-5">
                            <h5 class="mb-3">Example</h5>
                            <p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="text-danger">em</code> units.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-alerts" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab">
                                                <h1>Example heading <span class="badge badge-primary">New</span></h1>
                                                <h2>Example heading <span class="badge badge-secondary">New</span></h2>
                                                <h3>Example heading <span class="badge badge-tertiary">New</span></h3>
                                                <h4>Example heading <span class="badge badge-info">New</span></h4>
                                                <h5>Example heading <span class="badge badge-danger">New</span></h5>
                                                <h6>Example heading <span class="badge badge-warning">New</span></h6>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                        <code class="language-html">
&lt;h1&gt;Example heading &lt;span class=&quot;badge badge-primary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example heading &lt;span class=&quot;badge badge-tertiary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example heading &lt;span class=&quot;badge badge-info&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example heading &lt;span class=&quot;badge badge-danger&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example heading &lt;span class=&quot;badge badge-warning&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                            <p>Badges can be used as part of links or buttons to provide a counter.</p>
                            <div class="p-4 my-3 bg-white">
                                <button type="button" class="btn btn-primary">
                                    Messages <span class="badge badge-danger">9</span>
                                </button>
                            </div>
                            <div>
                                <pre class="bg-white">
                                        <code class="language-html">
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
    Messages &lt;span class=&quot;badge badge-danger&quot;&gt;9&lt;/span&gt;
&lt;/button&gt;
                                        </code>
                                    </pre>
                            </div>
                            <p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply
                                be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
                            <p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
                            <div class="p-4 my-3 bg-white">
                                <button type="button" class="btn btn-primary">
                                    Profile <span class="badge badge-white">3</span>
                                    <span class="sr-only">unread messages</span>
                                </button>
                            </div>
                            <div>
                                <pre class="bg-white">
                                        <code class="language-html">
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
    Notifications &lt;span class=&quot;badge badge-pill badge-white&quot;&gt;5&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;unread messages&lt;/span&gt;
&lt;/button&gt;
                                        </code>
                                    </pre>
                            </div>
                        </div>
                        <div id="contextual-variations" class="my-5">
                            <h5 class="mb-3">Contextual variations</h5>
                            <p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-dismissible" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-4-tab" data-toggle="tab" href="#tabs-text-4" role="tab" aria-controls="tabs-text-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab">
                                                <span class="badge badge-primary text-uppercase">Primary</span>
                                                <span class="badge badge-secondary text-uppercase">Secondary</span>
                                                <span class="badge badge-tertiary text-uppercase">Tertiary</span>
                                                <span class="badge badge-success text-uppercase">Success</span>
                                                <span class="badge badge-danger text-uppercase">Danger</span>
                                                <span class="badge badge-warning text-uppercase">Warning</span>
                                                <span class="badge badge-info text-uppercase">Info</span>
                                                <span class="badge badge-light text-uppercase">Light</span>
                                                <span class="badge badge-dark text-uppercase">Dark</span>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-4" role="tabpanel" aria-labelledby="tabs-text-4-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                        <code class="language-html">
&lt;span class=&quot;badge badge-primary text-uppercase&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge badge-secondary text-uppercase&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge badge-tertiary text-uppercase&quot;&gt;Tertiary&lt;/span&gt;
&lt;span class=&quot;badge badge-success text-uppercase&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge badge-danger text-uppercase&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge badge-warning text-uppercase&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge badge-info text-uppercase&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge badge-light text-uppercase&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge badge-dark text-uppercase&quot;&gt;Dark&lt;/span&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                            <div class="alert alert-danger">
                                <h5 class="alert-heading">Conveying meaning to assistive technologies</h5>
                                <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the
                                    content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="text-white font-weight-bolder">.sr-only</code> class.
                                </p>
                            </div>
                        </div>
                        <div id="pill-badges" class="my-5">
                            <h5 class="mb-3">Pill Badges</h5>
                            <p>Use the <code class="text-danger">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="text-danger">border-radius</code> and additional horizontal <code class="text-danger">padding</code>).
                                Useful if you miss the badges from v3.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-ad-content" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-5-tab" data-toggle="tab" href="#tabs-text-5" role="tab" aria-controls="tabs-text-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-6-tab" data-toggle="tab" href="#tabs-text-6" role="tab" aria-controls="tabs-text-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tabs-text-5" role="tabpanel" aria-labelledby="tabs-text-5-tab">
                                                <span class="badge badge-pill badge-primary text-uppercase">Primary</span>
                                                <span class="badge badge-pill badge-secondary text-uppercase">Secondary</span>
                                                <span class="badge badge-pill badge-tertiary text-uppercase">Tertiary</span>
                                                <span class="badge badge-pill badge-success text-uppercase">Success</span>
                                                <span class="badge badge-pill badge-danger text-uppercase">Danger</span>
                                                <span class="badge badge-pill badge-warning text-uppercase">Warning</span>
                                                <span class="badge badge-pill badge-info text-uppercase">Info</span>
                                                <span class="badge badge-pill badge-light text-uppercase">Light</span>
                                                <span class="badge badge-pill badge-dark text-uppercase">Dark</span>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-6" role="tabpanel" aria-labelledby="tabs-text-6-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                        <code class="language-html">
&lt;span class=&quot;badge badge-pill badge-primary text-uppercase&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-secondary text-uppercase&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-tertiary text-uppercase&quot;&gt;Tertiary&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-success text-uppercase&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-danger text-uppercase&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-warning text-uppercase&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-info text-uppercase&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-light text-uppercase&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge badge-pill badge-dark text-uppercase&quot;&gt;Dark&lt;/span&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="links" class="my-5">
                            <h5 class="mb-3">Links</h5>
                            <p>Using the contextual <code class="text-danger">.badge-*</code> classes on an <code class="text-danger">&lt;a&gt;</code> element quickly provide actionable badges with hover and focus states.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-links-content" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-7-tab" data-toggle="tab" href="#tabs-text-7" role="tab" aria-controls="tabs-text-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-8-tab" data-toggle="tab" href="#tabs-text-8" role="tab" aria-controls="tabs-text-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent5">
                                            <div class="tab-pane fade show active" id="tabs-text-7" role="tabpanel" aria-labelledby="tabs-text-7-tab">
                                                <a href="#" class="badge badge-primary">Primary</a>
                                                <a href="#" class="badge badge-secondary">Secondary</a>
                                                <a href="#" class="badge badge-tertiary">Tertiary</a>
                                                <a href="#" class="badge badge-success">Success</a>
                                                <a href="#" class="badge badge-danger">Danger</a>
                                                <a href="#" class="badge badge-warning">Warning</a>
                                                <a href="#" class="badge badge-info">Info</a>
                                                <a href="#" class="badge badge-light">Light</a>
                                                <a href="#" class="badge badge-dark">Dark</a>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-8" role="tabpanel" aria-labelledby="tabs-text-8-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                        <code class="language-html">
&lt;a href=&quot;#&quot; class=&quot;badge badge-primary&quot;&gt;Primary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-tertiary&quot;&gt;Tertiary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="Size" class="my-5">
                            <h5 class="mb-3">Size</h5>
                            <p>Fancy larger or smaller badges? Add <code class="text-danger">.badge-md</code> or <code class="text-danger">badge-lg</code> for additional sizes.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-size-content" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-9-tab" data-toggle="tab" href="#tabs-text-9" role="tab" aria-controls="tabs-text-9" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-10-tab" data-toggle="tab" href="#tabs-text-10" role="tab" aria-controls="tabs-text-10" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tabs-text-9" role="tabpanel" aria-labelledby="tabs-text-9-tab">
                                                <span class="badge badge-primary text-uppercase">Badge</span>
                                                <span class="badge badge-md badge-primary text-uppercase">Badge md</span>
                                                <span class="badge badge-lg badge-primary text-uppercase">Badge lg</span>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-10" role="tabpanel" aria-labelledby="tabs-text-10-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                        <code class="language-html">
&lt;span class=&quot;badge badge-primary text-uppercase&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge badge-md badge-primary text-uppercase&quot;&gt;Badge md&lt;/span&gt;
&lt;span class=&quot;badge badge-lg badge-primary text-uppercase&quot;&gt;Badge lg&lt;/span&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#example" class="nav-link" data-smooth-scroll>Example</a>
                            </li>
                            <li class="nav-item">
                                <a href="#contextual-variations" class="nav-link " data-smooth-scroll>Contextual
                                    variations</a>
                            </li>
                            <li class="nav-item">
                                <a href="#pill-badges" class="nav-link " data-smooth-scroll>Pill badges</a>
                            </li>
                            <li class="nav-item">
                                <a href="#links" class="nav-link " data-smooth-scroll>Links</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>